<template>
	<view class="index-content">
		<view class="order-list">
			<u-empty v-if="orderList.length==0" margin-top="100" mode="order" iconSize="100" textSize="14"
				:text="$t('OrderEmpty')">
			</u-empty>
			<view class="list" v-if="orderList.length" :style="{direction: i18nLocale=='ug'?'rtl':''}"
				v-for="(item,index) in orderList" @click="handdetail(item.id)">
				<view class="order-item">
					<view class="title">
						{{i18nLocale=='ug'?item.ug_name:item.cn_name}}
					</view>
					<view class="qty-box">

						<view class="qty" :style="{color:colortopic()}">
							<view class="">
								{{$t('Noqty')}}
							</view>
							<text>{{item.no_qty?item.no_qty:0}}</text>
						</view>
						<view class="qty" style="color:#999">
							<view class="">
								{{$t('Yesqty')}}
							</view>
							<text style="color:#999">{{item.yes_qty?item.yes_qty:0}}</text>
						</view>
						<view class="qty" :style="{color:colortopic()}">
							<view class="">
								{{$t('EmployeeTotal')}}
							</view>
							<text>{{item.no_qty?item.yes_qty?item.no_qty+item.yes_qty:item.no_qty+0:0+item.yes_qty}}</text>
						</view>
					</view>
				</view>
			</view>
			<Loading :show="tabloadshow" text="" iconName="circle-round" :showText="false"></Loading>
		</view>
	</view>
</template>

<script>
	import {
		getorderstatistics,
		orderstatus
	} from '@/api/employee.js';
	export default {
		mounted() {
			this.getOrders();
		},
		data() {
			return {
				orderList: [],
				tabloadshow: false
			}
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		methods: {
			getOrders() {
				let that = this;
				getorderstatistics({}).then((res) => {
					if (res.code == 200) {
						let data = res.body;
						that.orderList = data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		.order-list {
			width: 100%;
			height: calc(100% - 40rpx);
			box-sizing: border-box;
			padding: 0rpx 20rpx;

			.list {
				width: 100%;
				background: #FFFFFF;
				box-shadow: $uni-bg-shadow;
				border-radius: $uni-border-radius-lg;
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx 40rpx;
				box-sizing: border-box;

				.order-item {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						text-align: center;
						padding: 0rpx 10rpx;
						font-size: $uni-font-size-lg;
					}

					.qty-box {
						display: flex;
						justify-content: space-around;
						align-items: center;
						padding: 10rpx 0rpx;

						.qty {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							padding: 0rpx 20rpx;

							text {
								padding: 10rpx 0rpx;
								font-size: $uni-font-size-base;
							}
						}
					}
				}


			}
		}
	}
</style>